<script setup>
import { ref, isRef, getCurrentInstance, reactive, isReactive, } from 'vue'


import FileUploader from './components/FileUploader.vue'
import V3ApiTest from './components/V3ApiTest.vue';
import Audio from './components/Audio.vue';
import ChooseTime from '@/components/ChooseTime.vue'
import Chat from './components/Chat.vue';
import Layout from './components/Layout.vue';
import ScrollPage from './components/ScrollPage.vue';
import ScrollPageAuto from './components/ScrollPageAuto.vue';
import HightTable from './components/HightTable.vue';
import Computed from './components/Computed.vue';
import webScoket from './components/webScoket.vue'
import inView from './components/inView.vue';
import trackMap from './components/trackMap.vue'
import childrenTest from './components/childrenTest.vue';
const startTime = ref('2025-01-02')
const endTime = ref('15:15:15')
const tabIndex = ref(14);
const changeTab = (index) => {
  tabIndex.value = index;
}

const list = Array.from({ length: 99999 }, (_, i) => `Item ${i + 1}`);
const column =
  [
    { label: '姓名', prop: 'name', slot: false, type: 'input', placeholder: '请输入姓名', search: true },
    { label: '年龄', prop: 'age', slot: false, type: 'input', placeholder: '请输入年龄', search: true },
    { label: '地址', prop: 'address', slot: false, type: 'input', placeholder: '请输入地址', search: false },
    { label: '性别', prop: 'sex', slot: false, type: 'select', placeholder: '请选择性别', search: true, searchData: [{ label: '男', value: 'male' }, { label: '女', value: 'female' }] },
  ]

const tableData = Array.from({ length: 30 }, (_, i) => ({
  name: `User ${i + 1}`,
  age: Math.floor(Math.random() * 30) + 18,
  address: `Address ${i + 1}`
}));

const defaultOperations = [
  {
    label: '编辑',
    key: 'edit',
    icon: 'Edit',
    handler: (row) => {
      console.log('编辑操作', row);
    }
  },
  {
    label: '删除',
    key: 'delete',
    icon: 'Delete',
    handler: (row) => {
      console.log('删除操作', row);
    }
  },
  {
    label: '查看',
    key: 'view',
    icon: 'View',
    handler: (row) => {
      console.log('查看操作', row);
    }
  },

]

const searchChang = (searchChang) => {
  console.log('searchChang', searchChang);
}
const title = ref('hello world')
const a = ref({ a: 'a' })
const b = reactive({ b: 'b' })


console.log('isRef', isRef(a))
console.log('isReactive', isReactive(b))

const { proxy } = getCurrentInstance()
import MyDialog from './components/dialog.vue'
const openDialog = () => {
  proxy.$modal.open(MyDialog, {
    title: '提示',
    message: '你确定要删除吗？'
  })

}


const revicerEmit = (e) => {
  console.log(e)
}

const handleChildrenMount = () => {
  console.log('子组件挂载-parent')
}
const childrenName = ref('childrenName')
</script>


<template>
  <div class="app">
    <ModalContainer />
    <div class="btn" style="display: flex;gap:20px;padding:20px;flex-wrap: wrap;">
      <el-button type="primary" @click="changeTab(0)">文件上传</el-button>
      <el-button type="primary" @click="changeTab(1)">chat聊天</el-button>
      <el-button type="primary" @click="changeTab(2)">自适应布局与响应式布局</el-button>
      <el-button type="primary" @click="changeTab(3)">固定高度虚拟列表</el-button>
      <el-button type="primary" @click="changeTab(4)">不固定高度虚拟列表</el-button>
      <el-button type="primary" @click="changeTab(5)">表格展示</el-button>
      <el-button type="primary" @click="changeTab(6)">时间选择（双v-model）</el-button>
      <el-button type="primary" @click="changeTab(7)">录音封装</el-button>
      <el-button type="primary" @click="changeTab(8)">V3Api</el-button>
      <el-button type="primary" @click="changeTab(9)">Computed</el-button>
      <el-button type="primary" @click="changeTab(9)">webScoket</el-button>
      <el-button type="primary" @click="changeTab(10)">customRef</el-button>
      <el-button type="primary" @click="changeTab(11)">inView</el-button>
      <el-button type="primary" @click="changeTab(13)">trackMap</el-button>
      <el-button type="primary" @click="changeTab(14)">children</el-button>

    </div>

    <div style="height: 200px;">

    </div>

    <div style="padding: 20px;">
      <main class="main-content" v-if="tabIndex == 0">
        <FileUploader />
      </main>

      <main v-if="tabIndex == 1">
        <Chat />
      </main>

      <main v-if="tabIndex == 2">
        <Layout />
      </main>
      <main v-if="tabIndex == 3">
        <ScrollPage :list="list" />
      </main>


      <main v-if="tabIndex == 4">
        <ScrollPageAuto :list="list" />
      </main>


      <main v-if="tabIndex == 5">
        <HightTable :columns="column" :tableData="tableData" showOperations :defaultOperations="defaultOperations"
          showPagination @searchChang="searchChang" />
      </main>

      <main v-if="tabIndex == 6">
        <ChooseTime v-model:startTime="startTime" v-model:endTime="endTime" />
      </main>


      <main v-if="tabIndex == 7">
        <Audio />
      </main>
      <main v-if="tabIndex == 8">
        <V3ApiTest name="zhangsan" v-model:title="title">
          {{ title }}
          <template #header="{ name }">
            <span>Hello, {{ name }}</span>
          </template>
        </V3ApiTest>
      </main>


      <main v-if="tabIndex == 9">
        <Computed />
      </main>


      <main v-if="tabIndex == 9">
        <webScoket />
      </main>


      <main v-if="tabIndex == 10">
        <custom />
      </main>



      <main v-if="tabIndex == 11">
        <inView />
      </main>


      <main v-if="tabIndex == 13">
        <trackMap />
      </main>


      <main v-if="tabIndex == 14">
        <div>



        {{ childrenName }}


        </div>
        <childrenTest @vue:mounted="handleChildrenMount" @c-mounted="revicerEmit" v-model:childrenName="childrenName" />
      </main>
    </div>




  </div>
</template>

<style>
body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f5f5f5;
}

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 auto;
}

.header {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 2rem 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header h1 {
  margin-bottom: 0.5rem;
  font-size: 2rem;
}

.main-content {
  flex: 1;
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: auto;
}

@media (max-width: 768px) {
  .header h1 {
    font-size: 1.5rem;
  }

  .header p {
    font-size: 0.9rem;
  }

  .main-content {
    padding: 1rem;
  }
}
</style>
